
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            <el-form :model="form" class="headForm">
                <el-form-item label="" style="width:105px">
                <el-input v-model="form.search" placeholder="商品名称/条码"></el-input>
                </el-form-item>


               <el-form-item label="" style="width:105px">
                <el-select v-model="form.status" placeholder="全部状态">
                    <el-option v-for="(item,a) in shelf" :key="a" :label="item.status_cn" :value="item.status"></el-option>
                </el-select>
                </el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="primary" icon="el-icon-search" @click="exportFn">导出</el-button>
                
            </el-form>
            
        </div> 
        <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
        <!-- table -->
        <div class="tabContainer_SI tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" :row-class-name="tableRowClassName">
                <!-- 商品ID	商品	当前库存	客遗库存	客存库存	今日预定库存	预警库存	锁定库存	状态	操作				 -->
                <el-table-column prop="item_id" label="商品ID" fixed ></el-table-column>
                <el-table-column prop="" label="商品" width="300px">
                    <template slot-scope="scope">
                        <div style="display:flex;align-items:center;">
                            <img :src="scope.row.item_image" alt="" style="width:50px;height:50px;margin-right:5px">
                            <span>{{scope.row.item_name}}</span>    
                        </div>                       
                    </template>
                </el-table-column>
                <el-table-column prop="item_num" label="当前库存" ></el-table-column>
                <el-table-column prop="recover" label="客遗库存"></el-table-column>
                <el-table-column prop="access" label="客存库存"></el-table-column>               
                <el-table-column prop="reserve_stock" label="今日预定库存"></el-table-column>
                <el-table-column prop="alarm_num" label="预警库存" ></el-table-column>
                <el-table-column prop="lock_stock" label="锁定库存"></el-table-column>
                <el-table-column prop="item_status_cn" label="状态"></el-table-column>
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0" width="400px">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="查看"  v-else>/</el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
       <!-- 库存借调 -->
        <el-dialog :title="borrowTxt" :visible.sync="borrowShow" class="business">
            <el-form ref="form" :model="borrowparam" label-width="80px">
                <el-form-item label="变更类型">
                    <el-radio v-model="borrowparam.operate" label="13">借调入库</el-radio>
                    <el-radio v-model="borrowparam.operate" label="12">借调出库</el-radio>
                </el-form-item>
                <el-form-item label="变更数">
                    <el-input v-model="borrowparam.stock" type="text" ></el-input>
                </el-form-item>
                <el-form-item label="备注" resize="none">
                    <el-input v-model="borrowparam.remarks" type="textarea" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="borrowShow = false">取 消</el-button>
                <el-button type="primary" @click="borrowShow2 = true">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="确认变更" :visible.sync="borrowShow2" class="business">
            <el-form ref="form" :model="borrowparam" label-width="80px">
                <el-form-item :label="borrowparam.operate == 13?'入库商品':'出库商品'">
                    <p>{{borrowTxt}}</p>
                </el-form-item>
                <el-form-item :label="borrowparam.operate == 13?'入库数':'出库数'">
                    <p>{{borrowparam.stock}}</p>
                </el-form-item>
                <el-form-item :label="borrowparam.operate == 13?'入库类型':'出库类型'">
                    <p v-if="borrowparam.operate == 13">借调入库</p>
                    <p v-if="borrowparam.operate == 12">借调出库</p>
                </el-form-item>
                <el-form-item label="备注" resize="none">
                    <p>{{borrowparam.remarks}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="borrowShow2 = false">取 消</el-button>
                <el-button type="primary" @click="borrowFn(editTitle)">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 保质期 -->
        <el-dialog title="保质期" :visible.sync="expirationShow" class="business" id="expirationBox">
            <el-form ref="form" :model="expirationparam" label-width="80px">
                <p style="margin:20px 0">盘库后请录入剩余酒水保质期，方便早班人员查看</p>
                <div style="margin-bottom:10px">                   
                    <el-date-picker  v-model="one.date" type="date" placeholder="选择日期" @change="thedate" format="yyyy-mm-dd"></el-date-picker>
                    <el-input placeholder="数量" v-model="one.q"></el-input>
                    <el-button type="primary" @click="expiradd">添加</el-button>  
                    <p>{{one.txt}}</p>  
                </div>
                <div style="margin-bottom:10px" v-for="(expiritem,i) in expirarr" :key="i">
                    <el-date-picker  v-model="expiritem.date" type="date" placeholder="选择日期"></el-date-picker>
                    <el-input placeholder="数量" v-model="expiritem.q"></el-input>
                    <p>{{expiritem.txt}}</p>  
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="expirationShow = false">取 消</el-button>
                <el-button type="primary" @click="expirationFn(editTitle)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss">
  .tabContainer_SI{
      .el-table{
          .cell{
              text-align: center;
          }
      }
  }
  .el-table{
      .el-table__body{
          tr.warning-row{
            
            td{
                background: #F56C6C;
                color:#fff;
                .lightFont{
                    color:#333
                }
            }
          } 
      }
  }  
  #expirationBox{
      .el-input{
          width:200px;
      }
  }
</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
export default {
    data () {
    return {
        searchparams:'',
        tableData:[],
        total:50,
        size:20,
        form:{size:20,
            page:1},
        pageNum:1,
        shelf:[
            {status:"",status_cn:"全部状态"},
            {status:"1",status_cn:"上架"},
            {status:"0",status_cn:"下架"}

        ],
        limitList:[],
        borrowShow:false,//借调第一个弹框        
        borrowTxt:'',//借调弹框的title
        borrowparam:{},//借调的数据存放
        borrowShow2:false,//借调确认的弹框控制
        expirationShow:false,//保质期弹框控制 
        expirationparam:{},//保质期数据
        expirarr:[],
        one:{}
    }
  }, 
   mounted(){
      let that = this;
      that.getList();
      abc.limit(that,'storageIn')
  },
  watch:{
      expirationShow(){         
          this.expirarr = []
      }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
        if (parseInt(row.item_num) <parseInt(row.alarm_num) ) {
            return 'warning-row';
        } 
        return '';
    },
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.stockindex,that.form,(res)=>{
            that.liclicked = false;
            that.tableData=res.data.list;
            that.total = res.data.total;
        })//列表
    },
    theClick(a,b){
        const that = this;
        if(a == 'storageBorrow'){
            //库存借调
            that.borrowShow = true;
            that.borrowTxt = b.item_name
            that.borrowparam.item_id = b.item_id
        }else if(a == 'storageRemark'){
            //库存记录 this.$router.push({name:'/accountDetaile',params:{"store_name":a.store_name,"dateM":a.date,store_id:a.store_id},path:'/accountDetaile'})
            that.$router.push({name:"/storageInM",params:{"item_id":b.item_id,"status":b.item_status},path:"/storageInM"})
        }else{
            //保质期
            that.expirationShow = true;
        }
    },
    borrowFn(){
        const that = this;
        abc.post(that,potUrl.stockset,that.borrowparam,(res)=>{
            that.borrowShow2 = false;
            that.borrowShow = false;
            that.getList()
        })
    },
    expirationFn(){
        
    },
    exportFn(){
        const that = this;
        let search = that.form.search == undefined?'':that.form.search;
        let status = that.form.status == undefined?'':that.form.status;
        window.location.href = abc.hostUrl + potUrl.stockexportList + abc.getSession("params")+ '&search=' + search + '&status=' + status + '&platform=operate';
    },
    expiradd(){
        const that = this;
        if(that.expirarr.length >= 2){
            that.$message('最多添加三个保质期时间。')          
            return  
        }
        that.expirarr.push({});

    },
    thedate(obj,val){
        console.log(val)
    }
  }
}
</script>
